1import Markdown from "react-markdown";
2import remarkGfm from "remark-gfm";
3
4export function MarkdownBody({ content }: { content: string }) {
5  return (
6    <Markdown
7      remarkPlugins={[remarkGfm]}
8      components={{
9        h1: ({ node, ...props }) => (
10          <h1 className="text-3xl font-bold mb-4 border-b pb-2" {...props} />
11        ),
12        h2: ({ node, ...props }) => (
13          <h2 className="text-xl font-semibold mb-3" {...props} />
14        ),
15        h3: ({ node, ...props }) => (
16          <h3 className="text-lg font-medium mb-2" {...props} />
17        ),
18
19        p: ({ node, ...props }) => (
20          <p className="leading-relaxed text-sm mb-4" {...props} />
21        ),
22        a: ({ node, ...props }) => (
23          <a
24            className="text-sm underline underline-offset-4 decoration-1 hover:decoration-2 transition-all"
25            {...props}
26          />
27        ),
28        blockquote: ({ node, ...props }) => (
29          <blockquote
30            className="text-sm border-l-4 border-current pl-4 italic my-4 opacity-80"
31            {...props}
32          />
33        ),
34
35        ul: ({ node, ...props }) => (
36          <ul
37            className="list-disc list-outside ml-6 mb-4 space-y-1"
38            {...props}
39          />
40        ),
41        ol: ({ node, ...props }) => (
42          <ol
43            className="list-decimal list-outside ml-6 mb-4 space-y-1"
44            {...props}
45          />
46        ),
47        li: ({ node, ...props }) => <li className="text-sm" {...props} />,
48
49        code: ({ node, className, children, ...props }) => {
50          return (
51            <code
52              className="bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded font-mono text-sm"
53              {...props}
54            >
55              {children}
56            </code>
57          );
58        },
59
60        table: ({ node, ...props }) => (
61          <div className="text-sm overflow-x-auto mb-6">
62            <table
63              className="min-w-full divide-y divide-current border border-current/20"
64              {...props}
65            />
66          </div>
67        ),
68        th: ({ node, ...props }) => (
69          <th
70            className="px-3 py-3.5 text-left text-sm font-semibold bg-black/5 dark:bg-white/5"
71            {...props}
72          />
73        ),
74        td: ({ node, ...props }) => (
75          <td
76            className="px-3 py-4 text-sm border-t border-current/10"
77            {...props}
78          />
79        ),
80
81        img: ({ node, ...props }) => (
82          <img
83            className="rounded-xl my-8 mx-auto max-w-full h-auto"
84            {...props}
85            alt={props.alt || ""}
86          />
87        ),
88        hr: () => <hr className="my-8 border-t border-current/20" />,
89      }}
90    >
91      {content}
92    </Markdown>
93  );
94}
95